<template>
  <section class="project-list">
    <a 
      v-for="(item, index) in projects" 
      :class="[
        'project-item',
        itemClassName,
        currentIndex === index ? 'pressed' : '',
      ]" 
      :key="index" 
      :target="item.link ? '_blank' : ''" 
      :href="item.link ? item.link : 'javascript:void(0)'"
      @click="handleClick(item)"
      @mousedown="handleMousedown(index)"
      @mouseup="handleMouseup()"
      @mouseleave="handleMouseup()">
      <div class="project-item-left">
        <h1>{{item.title}}</h1>
        <p>{{item.desc}}</p>
      </div>
      <div class="project-item-right">
        <img :src="item.img" :alt="item.title" :class="iconType === 'animal' ? 'animal' : ''">
      </div>
    </a>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Project } from '@/types/index'

const emits = defineEmits(['click'])

defineProps({
  projects: {
    type: Array<Project>,
    default: () => []
  },
  itemClassName: {
    type: String,
    default: 'surprise'
  }
})

const iconType = import.meta.env.VITE_PROJECT_TYPE

const handleClick = (item: Project) => {
  if (item.link) {
    return
  }

  emits('click', item)
}

const currentIndex = ref(-1)
const handleMousedown = (index: number) => {
  if (currentIndex.value === index) {
    return
  }

  currentIndex.value = index
}

const handleMouseup = () => {
  currentIndex.value = -1
}
</script>

<style lang="scss" scoped>
.project-list {
  display: flex;
  flex-wrap: wrap;
  .project-item {
    display: flex;
    background-color: var(--item_bg_color);
    margin: 7px;
    border-radius: 8px;
    padding: 15px;
    min-height: 100px;
    width: calc(25% - 15px);
    backdrop-filter: blur(var(--card_filter));
    -webkit-backdrop-filter: blur(var(--card_filter));
    transition: opacity 0.5s ease, background-color 0.2s ease, border 0.2s ease, transform 0.3s ease;

    &.project {
      height: 120px;
    }

    &:hover {
      box-shadow: 0 8px 16px -4px #2c2d300c;
      transform: translateY(-2px);

      .project-item-left {
        width: 100%;
      }
      .project-item-right {
        width: 0%;
        img {
          transform: rotate(40deg);
        }
      }

      h1 {
        font-size: 18px;
      }
    }

    &.pressed {
      transform: scale(0.9);
      background-color: var(--item_hover_color);
    }
  
    .project-item-left {
      transition: width 0.4s ease;
      height: 100%;
      width: 80%;

      p {
        font-size: 12px;
        margin-top: 16px;
        color: var(--item_left_text_color);
      }

      h1 {
        font-weight: normal;
        font-size: 16px;
        margin: 0px;

        transition: font-size 0.4s ease;
        color: var(--item_left_title_color);
      }
    }
    .project-item-right {
      overflow: hidden;
      transition: width 0.4s ease;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 20%;
      height: 100%;
      img {
        height: 40px;
        width: 40px;
        &.animal {
          height: 60px;
          width: 60px;
        }
      }
    }
  }
}
</style>